import { UserOutlined } from "@ant-design/icons";
import { ProCard } from "@ant-design/pro-components";
import { Avatar, Badge, List } from "antd";

import React from "react";

const Page13: React.FC = () => {
  const data = [
    {
      title: "张三",
      description: "在线",
      avatar: <Avatar icon={<UserOutlined />} />,
      status: "online",
    },
    {
      title: "李四",
      description: "离线",
      avatar: <Avatar icon={<UserOutlined />} />,
      status: "offline",
    },
    {
      title: "王五",
      description: "忙碌",
      avatar: <Avatar icon={<UserOutlined />} />,
      status: "busy",
    },
  ];

  return (
    <div style={{ padding: 24 }}>
      <h1>用户状态页面</h1>
      <ProCard>
        <List
          itemLayout="horizontal"
          dataSource={data}
          renderItem={(item) => (
            <List.Item>
              <List.Item.Meta
                avatar={
                  <Badge
                    status={
                      item.status === "online"
                        ? "success"
                        : item.status === "busy"
                          ? "processing"
                          : "default"
                    }
                    dot
                  >
                    {item.avatar}
                  </Badge>
                }
                title={item.title}
                description={item.description}
              />
            </List.Item>
          )}
        />
      </ProCard>
    </div>
  );
};

export default Page13;
